:root {
  --time-picker-border-radius: 4px;
  --time-picker-font-size: var(--font-size-md);
  --time-picker-min-width: 290px;
  --time-picker-title-height: 105px;
  --time-picker-title-padding: 16px;
  --time-picker-title-margin-bottom: 8px;
  --time-picker-title-color: #fff;
  --time-picker-title-background: var(--color-primary);
  --time-picker-title-hint-color: '#fff';
  --time-picker-title-hint-font-size: 14px;
  --time-picker-title-hint-min-height: 21px;
  --time-picker-title-inactive-opacity: 0.6;
  --time-picker-title-time-font-size: 50px;
  --time-picker-title-time-margin: 0 5px;
  --time-picker-title-time-border-radius: 0;
  --time-picker-title-time-padding: 0;
  --time-picker-title-time-background: transparent;
  --time-picker-title-time-active-background: transparent;
  --time-picker-title-time-container-justify-content: flex-end;
  --time-picker-title-ampm-button-active-background: transparent;
  --time-picker-title-ampm-margin-left: 10px;
  --time-picker-title-ampm-border-radius: 0;
  --time-picker-title-ampm-border: none;
  --time-picker-title-ampm-button-padding: 2px;
  --time-picker-clock-left: 27px;
  --time-picker-clock-right: 27px;
  --time-picker-clock-top: 27px;
  --time-picker-clock-bottom: 27px;
  --time-picker-clock-container-width: 256px;
  --time-picker-clock-container-height: 256px;
  --time-picker-clock-container-background: #e0e0e0;
  --time-picker-clock-hand-height: calc(50% - 4px);
  --time-picker-clock-hand-width: 2px;
  --time-picker-clock-hand-bottom: 50%;
  --time-picker-clock-hand-left: calc(50% - 1px);
  --time-picker-clock-hand-background: var(--color-primary);
  --time-picker-clock-hand-border-color: var(--color-primary);
  --time-picker-clock-hand-before-width: 10px;
  --time-picker-clock-hand-before-height: 10px;
  --time-picker-clock-hand-before-border-width: 2px;
  --time-picker-clock-hand-after-width: 4px;
  --time-picker-clock-hand-after-height: 4px;
  --time-picker-clock-item-height: 32px;
  --time-picker-clock-item-width: 32px;
  --time-picker-clock-item-active-background: var(--color-primary);
  --time-picker-clock-item-active-color: var(--color-on-primary);
  --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
  --time-picker-clock-item-disable-background: #bdbdbd;
  --time-picker-clock-item-text-color: #555;
  --time-picker-inner-left: 36px;
  --time-picker-inner-right: 36px;
  --time-picker-inner-top: 36px;
  --time-picker-inner-bottom: 36px;
  --time-picker-body-background: #fff;
  --time-picker-body-height: 288px;
  --time-picker-actions-padding: 0 8px 12px 8px;
}

// Mixins
.var-time-picker-after-before-basic {
  content: '';
  position: absolute;
  border-radius: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.var-time-picker {
  border-radius: var(--time-picker-border-radius);
  contain: layout style;
  display: flex;
  width: 100%;
  flex-direction: column;
  font-size: var(--time-picker-font-size);
  position: relative;
  min-width: var(--time-picker-min-width);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;

  &__title {
    min-height: var(--time-picker-title-height);
    padding: var(--time-picker-title-padding);
    color: var(--time-picker-title-color);
    background: var(--time-picker-title-background);
    transition: 0.25s background-color;
    display: block;

    &-splitter {
      display: flex;
      align-items: center;
    }

    &-hint {
      color: var(--time-picker-title-hint-color);
      font-size: var(--time-picker-title-hint-font-size);
      margin-bottom: var(--time-picker-title-margin-bottom);
      min-height: var(--time-picker-title-hint-min-height);
    }

    &-time-container {
      display: flex;
      align-items: center;
      justify-content: var(--time-picker-title-time-container-justify-content);
    }

    &-btn {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: 0.3s var(--cubic-bezier);
      white-space: nowrap;
      background: var(--time-picker-title-time-background);
      padding: var(--time-picker-title-time-padding);
      border-radius: var(--time-picker-title-time-border-radius);
      opacity: var(--time-picker-title-inactive-opacity);

      &--active {
        background: var(--time-picker-title-time-active-background);
        opacity: 1;
      }
    }

    &-time {
      display: flex;
      justify-content: flex-end;
      font-size: var(--time-picker-title-time-font-size);

      .var-time-picker__title-btn {
        align-items: center;
        margin: var(--time-picker-title-time-margin);
      }
    }

    &-ampm {
      border: var(--time-picker-title-ampm-border);
      border-radius: var(--time-picker-title-ampm-border-radius);
      margin-left: var(--time-picker-title-ampm-margin-left);
      overflow: hidden;
    }

    &-ampm &-btn {
      padding: var(--time-picker-title-ampm-button-padding);
      border-radius: 0;
      opacity: var(--time-picker-title-inactive-opacity);

      &--active {
        background: var(--time-picker-title-ampm-button-active-background);
        opacity: 1;
      }
    }

    &-ampm &-btn:first-child {
      border-bottom: var(--time-picker-title-ampm-border);
    }
  }

  &__body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--time-picker-body-height);
    background-color: var(--time-picker-body-background);
    transition: 0.25s background-color;
  }

  &__clock {
    position: absolute;
    bottom: var(--time-picker-clock-bottom);
    left: var(--time-picker-clock-left);
    right: var(--time-picker-clock-right);
    top: var(--time-picker-clock-top);

    &-container {
      width: var(--time-picker-clock-container-width);
      height: var(--time-picker-clock-container-height);
      background: var(--time-picker-clock-container-background);
      border-radius: 50%;
      position: relative;
    }

    &-hand {
      height: var(--time-picker-clock-hand-height);
      width: var(--time-picker-clock-hand-width);
      bottom: var(--time-picker-clock-hand-bottom);
      left: var(--time-picker-clock-hand-left);
      transform-origin: center bottom;
      position: absolute;
      will-change: transform;
      z-index: 1;
      background-color: var(--time-picker-clock-hand-background);
      border-color: var(--time-picker-clock-hand-border-color);

      &::before {
        .var-time-picker-after-before-basic();

        background: transparent;
        border: var(--time-picker-clock-hand-before-border-width) solid;
        width: var(--time-picker-clock-hand-before-width);
        height: var(--time-picker-clock-hand-before-height);
        top: -5px;
        border-color: inherit;
      }

      &::after {
        .var-time-picker-after-before-basic();

        border-color: inherit;
        height: var(--time-picker-clock-hand-after-height);
        width: var(--time-picker-clock-hand-after-width);
        top: 100%;
        border-style: solid;
        background-color: inherit;
      }
    }

    &-item {
      align-items: center;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      height: var(--time-picker-clock-item-height);
      position: absolute;
      width: var(--time-picker-clock-item-width);
      user-select: none;
      transform: translate(-50%, -50%);
      color: var(--time-picker-clock-item-text-color);

      &--active {
        background: var(--time-picker-clock-item-active-background);
        z-index: 2;
        color: var(--time-picker-clock-item-active-color);
      }

      &--disable {
        color: var(--time-picker-clock-item-disable-color);
      }
    }

    &-inner {
      position: absolute;
      bottom: var(--time-picker-inner-bottom);
      left: var(--time-picker-inner-left);
      right: var(--time-picker-inner-right);
      top: var(--time-picker-inner-top);
    }
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--time-picker-body-background);
    padding: var(--time-picker-actions-padding);
  }

  &-panel-fade-enter-from,
  &-panel-fade-leave-to {
    transition: 0.3s var(--cubic-bezier);
    opacity: 0;
  }

  &-panel-fade-leave-active {
    position: absolute;
  }
}
